<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现的具有滤镜效果的横向焦点图片轮换</title>
<link rev="stylesheet" href="css/new_common.css" type="text/css" rel="stylesheet" />
<link rev="stylesheet" href="css/new_index.css" type="text/css" rel="stylesheet" />
<style>
.index_focus_box ul.panel {
	z-index: 20;
	width: 730px;
	position: absolute;
	top: 325px;
	height: 34px;
}
.index_focus_box ul.panel li {
	display: inline;
	background: #000;
	filter: alpha(opacity=50);
	float: left;
	margin-left: 1px;
	width: 145px;
	height: 34px;
	opacity: .5;
}
.index_focus_box ul.panel li.last {
	width: 145px
}
.index_focus_box ul.panel li.on {
	filter: alpha(opacity=80); opacity: .8
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>

<body>
<div class="index_focus_box ftl" id="index_focus_box" ads_key="index_focus" ads_name="首页焦点广告位">
  <div class="img dpn" style="display: block; "><a href="" target="_blank">
       <img style="width: 730px; height: 360px" alt="新品四重礼" src="images/new4gift.jpg" /></a></div>
  <div class="img dpn"><a href="" target="_blank">
       <img style="width: 730px; height: 360px" alt="50000红包送不停" src="images/package.jpg" /> </a></div>
  <div class="img dpn"><a href="" target="_blank">
       <img style="width: 730px; height: 360px" alt="积分换购，金秋献礼！" src="images/1.jpg" /> </a></div>
  <div class="img dpn"><a href="" target="_blank">
       <img style="width: 730px; height: 360px" alt="真有1套，国庆献礼！" src="images/2.jpg" /> </a></div>
  <div class="img dpn"><a href="" target="_blank">
       <img style="width: 730px; height: 360px" alt="三防手机ET10" src="images/4.jpg" /> </a></div>
  <ul class="panel" id="index_focus_txt_bg">
    <li class="on"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
  </ul>
  <ul class="title" id="index_focus_txt">
    <li class="on"><a title="庆国庆 新品四重礼" href="" target="_blank">庆国庆 新品四重礼</a></li>
    <li><a title="50000红包送不停" href="" target="_blank">50000红包送不停</a></li>
    <li><a title="积分换购，金秋献礼！" href="" target="_blank">积分换购，金秋献礼！</a></li>
    <li><a title="真有1套，国庆献礼！" href="" target="_blank">真有1套，国庆献礼！</a></li>
    <li><a title="三防手机ET10" href="" target="_blank">三防手机ET10</a></li>
  </ul>
  <div class="loding" id="index_focus_loding" style="display: none; "></div>
</div>

<script type="text/javascript">
$(function(){
  self_auto_change = null;
  var self_now = 0;
  var self_speed = 5000; 
  var self_max = $('#index_focus_box div.img').size();
  $('#index_focus_loding').hide();
  $('#index_focus_box div:first').show();
  $('#index_focus_txt_bg li:first').addClass('on');
  $('#index_focus_txt li:first').addClass('on');
  $('#index_focus_txt li').each(function(i)
    {
	  $(this).mouseover(function(){
		self_now = i;
		clearInterval(self_auto_change);
		self_change(i);
	  }).mouseout(function(){
		self_auto_change = self_interval();
	  });
   });
  
  function self_change(i)
  {
	$('#index_focus_box div.img').hide();
	$('#index_focus_txt_bg li').removeClass('on');
	$('#index_focus_txt li').removeClass('on');
	$('#index_focus_box div.img:eq(' + i + ')').show();
	$('#index_focus_txt_bg li:eq(' + i + ')').addClass('on');
	$('#index_focus_txt li:eq(' + i + ')').addClass('on');
  }
  
  function self_interval()
  {
	return setInterval(function(){
	  self_now++;
	  if (self_now >= self_max)
	  {
		 self_now = 0;
	  }
	  self_change(self_now);
	}, self_speed);
  } 
  });
</script>

</body>
</html>
